<template>
  <div class="layout hom-layout">
    <div
      class="list-group-item"
      v-for="(item, index) in componentsData"
      :key="index"
    >
      <component
        :is="componentMap[terminal - 1].get(item.type)"
        :componentContent="item.componentContent"
        :terminal="terminal"
      ></component>
    </div>
  </div>
</template>

<script>
import componentMap from './componentMap'
import api from '@/api'
import { listSearchMixin } from '@/config/mixin'
import { mapMutations } from 'vuex'
export default {
  name: 'canvasPage',
  mixins: [listSearchMixin],
  data () {
    return {
      terminal: 3,
      componentsData: [],
      activeComponent: -1,
      componentMap: componentMap
    }
  },
  mounted () {
    this.canvasGet()
  },
  methods: {
    ...mapMutations({
      setComponentsData: 'SET_COMPONENTSDATA'
    }),
    // 读取画布
    canvasGet () {
      var _this = this
      let params = {
        url: api.getCanvas + '?terminal=' + this.terminal,
        method: 'GET'
      }
      this.sendReq(params, res => {
        if (JSON.stringify(res.data) !== '{}') {
          _this.canvasId = res.data.canvasId
          this.componentsData = JSON.parse(res.data.json)
          var componentsData = this.componentsData
          for (let i = 0; i < componentsData.length; i++) {
            if (componentsData[i].type === 'productList') {
              if (componentsData[i].componentContent.categoryId) {
                _this.sendReq(
                  {
                    url: `${api.getProducts}?page=1&pageSize=20&classifyId=${
                      componentsData[i].componentContent.categoryId
                    }`,
                    method: 'GET'
                  },
                  proRes => {
                    componentsData[i].componentContent.imgTextData =
                      proRes.data.list
                  }
                )
              }
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hom-layout {
  background-color: #f5f5f5;
}
</style>

<style lang="scss">
.warp {
  width: 1252px;
  margin: 0 auto;
  max-width: 96%;
}
.flex-box {
  display: flex;
}
</style>
